<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh-CN">
<%@include file="/WEB-INF/include-head.jsp" %>
<body>
<script>
    $(function () {
        // select 是标签选择器
        // :eq(0)表示选择页面上的第一个
        // :eq(1)表示选择页面上的第二个
        // “>”表示选择子元素
        // :selected 表示选择“被选中的”option
        // appendTo()能够将 jQuery 对象追加到指定的位置
        $("#toRightBtn").click(function () {
            $("select:eq(0)>option:selected").appendTo($("select:eq(1)"));
        });

        $("#toLeftBtn").click(function () {
            $("select:eq(1)>option:selected").appendTo($("select:eq(0)"));
        });

        $("#saveBtn").click(function () {
            // 在提交表单前把“已分配”部分的 option 全部选中
            $("select:eq(1)>option").prop("selected", "selected");

            // ①收集右边选中框的authId
            // [1]声明一个专门的数组存放 id
            var authList = [];

            $("select:eq(1)>option").each(function () {
                authList.push(this.value);
            });

            //  ②发送请求保存操作
            var responseBody = {
                'roleIdList': authList,
                // 为了服务器端 handler 方法能够统一使用 List<Integer>方式接收数据，roleId 也存 入数组
                'adminId': [${requestScope.adminId}],
            };

            responseBody = JSON.stringify(responseBody);
            $.ajax({
                'url': 'save/AdminAuth.json',
                'type': 'post',
                'data': responseBody,
                'contentType': 'application/json;charset=UTF-8',
                "success": function (response) {
                    var result = response.result;
                    if (result == "SUCCESS") {
                        layer.msg("操作成功！");
                    }
                    if (result == "FAILED") {
                        layer.msg("操作失败！" + response.message);
                    }
                }, "error": function (response) {
                    layer.msg(response.status + " " + response.statusText);
                }
            });

            // 为了看到上面代码的效果，暂时不让表单提交
            return false;

        });
    });
</script>
<%@include file="/WEB-INF/include-nav.jsp" %>
<div class="container-fluid">
    <div class="row">
        <%@include file="/WEB-INF/include-sidebar.jsp" %>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <ol class="breadcrumb">
                <li><a href="#">首页</a></li>
                <li><a href="#">数据列表</a></li>
                <li class="active">分配角色</li>
            </ol>
            <div class="panel panel-default">
                <div class="panel-body">
                    <form role="form" class="form-inline">
                        <div class="form-group">
                            <label>未分配角色列表</label><br>
                            <select class="form-control" multiple="" size="10" style="width:100px;overflow-y:auto;">
                                <c:forEach items="${requestScope.unAssignRoleList}" var="role">
                                    <option value="${role.id}">${role.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                        <div class="form-group">
                            <ul>
                                <li id="toRightBtn" class="btn btn-default glyphicon glyphicon-chevron-right"></li>
                                <br>
                                <li id="toLeftBtn" class="btn btn-default glyphicon glyphicon-chevron-left"
                                    style="margin-top:20px;"></li>
                                <br>
                            </ul>
                        </div>
                        <div class="form-group" style="margin-left:40px;">
                            <label>已分配角色列表</label><br>
                            <select class="form-control" multiple="" size="10" style="width:100px;overflow-y:auto;">
                                <c:forEach items="${requestScope.assignedRoleList}" var="role">
                                    <option value="${role.id}">${role.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </form>
                    <br>
                    <input id="saveBtn" class="btn btn-lg btn-success btn-mini" type="button" value="保存"> </input>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>
